<template>
  <div class="msg-detail">
    <m-header title="消息中心"></m-header>
    <div class="msg-body">
      <div class="title">{{msgDetail.title}}</div>
      <div class="content">{{msgDetail.content}}</div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  data () {
    return {
      msgDetail: {}
    };
  },
  created () {
    this.fetchData();
  },
  methods: {
    ...mapActions({
      getDetailMessage: 'mine/getDetailMessage'
    }),
    fetchData () {
      const { member_message_id } = this.$route.params || {};
      this.getDetailMessage({ member_message_id }).then(res => {
        if (res) {
          this.msgDetail = res;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.msg-detail {
  // background: #f7f7f7;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: white;
  .msg-body {
    position: relative;
    top: 1.22rem;
    color: #333333;
    // background: white;
    .title {
      font-size: 0.3rem;
      margin-bottom: 0.2rem;
      text-align: center;
    }
    .content {
      font-size: 0.26rem;
      padding: 0 0.4rem;
    }
  }
}
</style>
